<template>
	<view class="content">
		<view class="tabs">
			<view class="navTab">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index}" @click="tabChange(index,item.value)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/5+'px'}"></view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view class="list-item" v-for="(item,index) in list" :key="index" @click="gouser(item.id)">
				<view class="head">
					<text class="t1">{{item.create_time}}</text>
					<text class="t2">{{setStatus(item.status)}}</text>
				</view>
				<view class="order-user">
					<view class="user tn-flex">
						<view class="user-right tn-flex">
							<view class="name">{{item.game_name}}</view>
							<view class="tag tn-flex tn-flex-col-center tn-flex-row-between">
								<text class="time">接单时间：{{item.start_time}}-{{item.end_time}}</text>
								<view class="price">
									<text class="p1">{{item.price}}</text>
									<text class="p2">海豚币</text>
									<text class="p3">/{{item.unit}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="foot tn-flex">
						<text class="t1" v-if="item.status != 5" @click.stop="del(item.id,index)">删除</text>
						<view class="btn1" v-if="item.status == 2 || item.status == 4" @click.stop="exhibitGoods(item.id,5,index)">立即上架</view>
						<view class="btn1" v-if="item.status == 5" @click.stop="exhibitGoods(item.id,4,index)">立即下架</view>
						<view class="btn2" v-if="item.status != 5"  @click.stop="goSkills(2,item.id)">重新编辑</view>
					</view>
				</view>
			</view>
		</view>
		 <tn-load-more :status="loadStatus"></tn-load-more>
		<view class="" style="height: 160rpx;"></view>
		<view class="submitBtn" @click="goSkills(1)">发布技能</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollList: [{
						name: '全部',
						value:'0'
					},
					{
						name: '进行中',
						value:'5'
					},
					{
						name: '待审核',
						value:'1'
					},
					{
						name: '已下架',
						value:'4'
					},
					{
						name: '已拒绝',
						value:'3'
					}
				],
				current: 0,
				width: 0,
				left: 0,
				itemNode: '',
				page:1,
				list:[],
				status:0,
				loadStatus:'nomore'
			}
		},
		onLoad() {
			uni.showLoading()
		},
		onShow() {
			this.getList()
		},
		computed:{
			setStatus(){
				return function (val){
					return val == 1 ? '待审核' : val == 2 ? '未上架' : val == 3 ? '已拒绝' : val == 4 ? '已下架' : '已上架'
				}
			}
		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').boundingClientRect(data => {
					this.itemNode = data
					this.width = data[this.current].width
				}).exec();
			}, 500)

		},
		onReachBottom() {
			this.page++
			this.loadStatus = 'loading'
			this.getList()
		},
		methods: {
			async getList(){
			 let result = await	this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_goods/list',
					data:{
						status:this.status,
						page:this.page
					}
				})
				let data = result.data.data.data
				if(this.page == 1){
					this.list = data
					uni.hideLoading()
				}else{
					this.list = this.list.concat(data)
					if(data.length == 0){
						this.page--
						this.loadStatus = 'nomore'
					}
				}


			},
			// 删除技能
			async del(play_goods_id,index){
				try{
					let result = await this.$request({
						loading:1,
						url:'/api/play_goods/del',
						method: 'post',
						data:{
							play_goods_id
						}
					})
					this.list.splice(index,1)
					uni.showToast({
						title:result.data.msg,
						icon:'none'
					})
				}catch(e){
					uni.showToast({
						title:e.data.msg,
						icon:'none'
					})
				}

			},
			// 上下架
			async exhibitGoods(play_goods_id,status,index){
				try{
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/play_goods/edit_status',
						data:{
							play_goods_id,
							status
						}
					})
					this.list[index].status = status
				}catch(e){
					uni.showToast({
						title:e.data.msg,
						icon:'none'
					})
				}

			},
			tabChange(index,value) {
				this.current = index
				this.status = value
				this.page = 1
				this.left = this.itemNode[index].left
				this.getList()
			},
			goSkills(type,id){
				console.log(id)
				uni.navigateTo({
					url:`/playcenterPage/PublishingSkills?type=${type}&id=${id}`
				})
			},
			gouser(id){
				uni.navigateTo({
					url:"/playcenterPage/skill-user?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	.tabs{
		position: sticky;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		z-index: 10;

	}
	.navTab {
		display: flex;
		align-items: center;
		height: 105rpx;
		position: relative;
		background-color: #ffffff;

		.tab-item {
			width: 150rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}

		.at-tab-item {
			font-size: 36rpx;
			color: $uni-text-color;

		}

		.tab-bottom {
			position: absolute;
			bottom: 12rpx;
			transition: left .2s linear;
			display: flex;
			justify-content: center;

			.xian {
				height: 8rpx;
        background: linear-gradient(90deg, #080808 0%, #080808 100%);
				border-radius: 60rpx;
			}
		}
	}

	.order-list{
		padding: 32rpx;
		.list-item{
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			.head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 88rpx;
				padding: 0 24rpx;
				border-bottom: 1px solid #efefef;
				.t1{
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}
				.t2{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333ad;
				}
			}
			.order-user{
				padding: 24rpx;
				.user{
					.user-left{
						image{
							width: 200rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}
					}
					.user-right{
						padding-left: 24rpx;
						flex-direction: column;
						flex: 1;
						.name{
							font-size: 30rpx;
							font-weight: bold;
							color: #333333;
							margin-bottom: 16rpx;
						}
						.tag{
							font-size: 26rpx;
							font-weight: 400;
							color: #333333ad;
							flex: 1;

						}
						.price{
							color: #e83a30;
							font-weight: bold;
							.p1{
								font-size: 40rpx;
							}
							.p2{
								font-size: 24rpx;
							}
							.p3{
								color: #333333ad;
							}
						}
					}
				}
				.foot{
					align-items: center;
					justify-content: flex-end;
					margin-top: 24rpx;
					.t1{
						font-size: 28rpx;
						font-weight: 400;
						color: #e83a30;
						margin-right: 24rpx;
					}
					.btn1{
						width: 160rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background: #9D5EF4;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 60rpx;
						// margin: 0 24rpx;
						margin-right: 24rpx;
					}
					.btn2{
						width: 160rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background: rgba(157,94,244,0);
						border: 1px solid #9D5EF4;
						font-size: 28rpx;
						font-weight: 400;
						color: #9D5EF4;
						line-height: 60rpx;
						text-align: center;
					}
				}
			}
		}
	}
	.submitBtn{
		height: 98rpx;
		background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
		border-radius: 49rpx;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 20rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
	}
}
</style>
